<template>
  <transition name="vlc-ani-slide-left">
   <div class="mask black" v-show="visible">
     <slot></slot>
   </div>
  </transition>
</template>
<style rel="stylesheet/less" lang="less">
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
  }
  .black{
    background-color: #eeeeee;
  }
</style>
<script>
   export default{
       props:{
           show:{
               type:Boolean,
               default:false
           }
       },
       data(){
           return{
               visible:this.show
           }
       },
       methods:{
           change(flag){
               this.visible=flag;
           }
       },
       watch:{
           show(val){
               this.visible =val;
           }
       }
   }
</script>
